<template>
    <div class="role-manage-container">
        <a-modal :visible="visible" width="40%" @ok="handleOk" @cancel="handleCancel">
            <xTable :tableConfig="tableConfig"> </xTable>
        </a-modal>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted, defineProps, defineEmits, watch } from 'vue'
import type { PropType } from 'vue'
import xTable, { useTable } from '@/components/common/x-table'
import type { TableData, TableColumnData } from '@arco-design/web-vue'
import { random } from 'lodash'
import dayjs from 'dayjs'
import RoleApi from '@/api/system/role/RoleApi'
import MenuApi from '@/api/system/menu/MenuApi'
import { Message } from '@arco-design/web-vue'

let props = defineProps({
    roleInfo: {
        type: Object as PropType<SysType.RoleInfo | null>,
        default: () => {}
    },
    visible: {
        type: Boolean,
        default: false
    }
})
let emits = defineEmits(['update:visible'])
let [configRef, getTableData] = useTable(
    {
        'rowKey': 'menuId',
        selectedKeys:[],
        rowSelection: {
            type: 'checkbox',
            showCheckedAll: true,
            checkStrictly: true
        },
        columns: [
            {
                title: '菜单名称',
                dataIndex: 'menuName'
            },
            {
                title: '路由地址',
                dataIndex: 'routePath'
            },
            {
                title: '菜单类型',
                dataIndex: 'type'
            },
            {
                title: '是否禁止',
                dataIndex: 'isForbidden'
            }

            // {
            //   title: '操作',
            //   dataIndex: 'operation',
            //   slotName: 'operation'
            // }
        ],
        data: [],
        pagination: {
            total: 0,
            pageSize: 1000,
            current: 1
        }
    },
    formatSearchResult
)
let tableConfig = ref(configRef)

function formatSearchResult(
    pageSize: number,
    current: number
): Promise<{ total: number; data: TableData[] }> {
    if (!props.roleInfo?.roleId)
        return new Promise((resolve, reject) => {
            resolve({ total: 0, data: [] })
        })
    return MenuApi.getAllMenuTreeList().then(res => {
        if (res.code == 200) {

            return {
                total: res.data.length,
                data:filterEmptyChildren(res.data)
            }
        } else {
            return {
                total: 0,
                data: []
            }
        }
    })
}

//将空的children字段删除
function filterEmptyChildren(data: Array<{[key in string]:any;}>) {
    return data.sort((a,b)=> b.level-a.level).map(item => {
        if (item.children&&item.children.length == 0) {
          delete item.children
        }else if(item.children&&item.children.length>0){
          item.children=filterEmptyChildren(item.children as any) 
        }
        item.disabled=item.isForbidden==1?true:false
        return item
    }) 
}

function getCurRoleMenuList() {
    if (props.roleInfo?.roleId) {
       RoleApi.getRoleMenuTreeList(props.roleInfo?.roleId).then(res => {
            if (res.code == 200) {
                tableConfig.value.selectedKeys=res.data.menuList.map(item=>item.menuId) 
            }
       })
    } 
}


watch(
    () => props.roleInfo,
    () => {
        if (props.roleInfo?.roleId) {
            getTableData().then(res=>{
              getCurRoleMenuList()
            })
        }
    }
)

function handleOk() {
  RoleApi.insertRoleMenuList(props.roleInfo?.roleId as string,tableConfig.value.selectedKeys as string[]).then(res=>{
    if(res.code==200){
      emits('update:visible', false)
      Message.success('保存成功')
    }else{

    }
  })
}
function handleCancel() {
    emits('update:visible', false)
}
</script>
<style scoped lang="scss">
.role-manage-container {
    width: 100%;
    padding: 6px 0px;
}
</style>
